<template>
	<view v-if="detailInfo" class="page">
		<uni-nav-bar ref="navBar" class="absolute" style="z-index:10;" statusBar :border="false"
			backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<scroll-view class="container" :style="`height:calc(100% - 52px - ${safeAreaBottom}px);`" scroll-y="true">
			<uni-swiper-dot :info="photos" :current="swiperDotIndex" :dotsStyles="{bottom:48}">
				<swiper class="swiper-box" autoplay circular :interval="2000" @change="swiperChange" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in photos" :key="index">
						<view class="swiper-item">
							<video v-if="isVideoFile(item)" class="h-full" :src="item"></video>
							<image v-else class="h-full" mode="aspectFill" :src="item"></image>
						</view>
						<view v-if="detailInfo.activeState===4||(!isLink && detailInfo.remainStock===0)" class="swiper-stamp">
							<image v-if="detailInfo.activeState===4" class="swiper-stamp-img"
								src="@/static/svg/activity/stamp-finished.svg"></image>
							<image v-else-if="detailInfo.remainStock===0" class="swiper-stamp-img"
								src="@/static/svg/activity/stamp-snapped-up.svg"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="m-16">
				<view class="uni-bg-white radius-12 px-12 py-16 mb-8">
					<view>
						<tag v-if="promotionLabel" class="mr-4">{{ promotionLabel }}</tag>
						<text class="text-color-regular fs-16 font-semibold leading-22 align-middle">{{detailInfo.activeTitle}}</text>
					</view>
					<view class="flex justify-between mt-8">
						<view class="flex item-center leading-22">
							<text class="color-primary fs-21 font-semibold mr-8"><text class="fs-14 font-normal">¥</text>{{numberFormat(detailInfo.activeGroupBuy.groupBuyPrice)}}</text>
							<text class="text-color-hint fs-14 font-medium text-throughline"><text class="font-normal">¥</text>{{numberFormat(detailInfo.originPrice)}}</text>
						</view>
					</view>
					<view class="mt-8 mb-12">
						<newcomer-coupon-tag v-if="detailInfo.activeRedPacket"
							class="mr-8"
							:price="detailInfo.activeRedPacket.firstRedPacketAmt" @click="showRedPacket" />
						<template v-if="detailInfo.activeDiscount && detailInfo.activeDiscount.length">
							<full-discount-tag v-for="(item,index) in detailInfo.activeDiscount" :key="index" :data="item" class="mr-8" />
						</template>
					</view>
					<view v-if="isSignUp && detailInfo.activeStepPrices && detailInfo.activeStepPrices.length"
						class="mb-12">
						<sign-up-number-tag v-for="(item,index) in detailInfo.activeStepPrices" :key="index"
							:number="item.enrollNum" :price="item.enrollPrice" class="mr-8" />
					</view>
					<location-info :info="detailInfo.address"></location-info>
				</view>
				<promotion-interest v-if="detailInfo.agentState===2" class="mt-8"
					:commissionAmt="detailInfo.commissionAmt" :otherEquity="detailInfo.otherEquity"
					:commissionRate="detailInfo.commissionRate"
					:defaultCommissionType="detailInfo.defaultCommissionType"
					:activePrice="detailInfo.activeGroupBuy.groupBuyPrice"
					/>
				<view class="uni-bg-white radius-12 px-12 py-16 flex justify-between item-center mt-8">
					<view class="flex item-center flex-1">
						<image class="cu-avatar round size-44 mr-8 flex-shrink" :src="detailInfo.logo"></image>
						<text class="fs-14 text-color-regular font-normal">{{detailInfo.businessShortName}}</text>
					</view>
				</view>
				<view v-if="detailInfo.activeGoods && detailInfo.activeGoods.length">
					<view class="tabs">
						<view class="tab-item" :class="activeTab===0?'active':''" @click="activeTab=0">
							<image v-if="activeTab===0" mode="widthFix" class="absolute h-full" style="top:-8px;" src="@/static/svg/activity/bg-tab-start.svg"></image>
							<text style="z-index:1;">活动详情</text>
						</view>
						<view class="tab-item" :class="activeTab===1?'active':''" @click="activeTab=1">
							<image v-if="activeTab===1" mode="widthFix" class="absolute h-full" style="top:-8px;" src="@/static/svg/activity/bg-tab-end.svg"></image>
							<text style="z-index:1;">活动商品</text>
						</view>
					</view>
					<view class="tab-content">
						<activity-detail v-if="activeTab===0" :showTitle="false" :content="detailInfo.content" />
						<view v-if="activeTab===1" v-for="(goods,index) in detailInfo.activeGoods" :key="index" class="goods-item">
							<view class="flex justify-center">
								<image class="size-48 radius-8 mr-12" :src="goods.goodsImgs">
								</image>
								<view class="flex-col">
									<text class="text-color-regular fs-14 font-semibold mb-8">{{goods.goodsName}}</text>
									<view class="flex" @click="showInstructionDialog(goods.id)">
										<text class="text-color-hint fs-12">可用商户&使用说明</text>
										<image class="size-16" src="@/static/svg/activity/icon-more.svg"></image>
									</view>
								</view>
							</view>
							<!-- 多商户不显示 -->
							<image v-if="goods.mulState===1" class="size-28" src="@/static/svg/activity/icon-goods-service.svg" @click="showServiceDialog(goods)"></image>
						</view>
					</view>
				</view>
				<view v-else class="mt-8">
					<activity-detail :content="detailInfo.content" />
				</view>
			</view>
			<view></view>
		</scroll-view>
		<view class="bg-white pt-8">
			<!-- <view @click="backTest">测试返回</view> -->
			<view class="mx-16 flex justify-between">
				<button class="flex center radius-8 h-46 flex-1 uni-bg-white fs-16 color-secondary-info font-normal border-secondary-info leading-22 mr-12" @click="goBack">返回修改</button>
				<button class="flex center radius-8 h-46 flex-1 fs-16 text-white bg-primary font-normal leading-22" @click="submit">发布活动</button>
			</view>
			<view :style="`height:${safeAreaBottom}px;`"></view>
		</view>
		<template>
			<RedPacketDialog ref="redPacketDialog" :data="detailInfo.activeRedPacket" />
			<ServiceDialog :phoneNumber="detailInfo.activeMobile" :weixin="detailInfo.activeWechat" ref="serviceDialog" />
			<instructions-dialog ref="instructionDialog"></instructions-dialog>
		</template>
	</view>
</template>

<script setup name="ActivityPreview">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import FullDiscountTag from '@/components/full-discount-tag/full-discount-tag.vue'
	import ServiceDialog from '@/components/service-dialog/service-dialog.vue'
	import RedPacketDialog from './components/red-packet-dialog.vue'
	import ActivityDetail from './components/activity-detail/activity-detail.vue'
	import ActivityFooter from './components/activity-footer/activity-footer.vue'
	import PromotionInterest from './components/promotion-interest/promotion-interest.vue'
	import Tag from '@/components/tag/tag.vue'
	import {
		releaseApi,
		businessActiveUpdateApi,
		myActiveDetailApi
	} from '@/api/business.js'
	import {
		numberFormat,
		formatBeginTime,
		formatEndTime,
		reformatDatetime,
		isVideoFile
	} from '@/utils/index.js'
	import { useActivity } from '@/hooks/useActivity.js'

	const userStore = useUserStore()
	const { isSignUp, isLink, photos, coverPicture, sortStepPrices, activityInfo, updateActivityInfo } = useActivity(detailInfo)

	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})

	const goBack = () => uni.navigateBack()
	const from = ref('')
	
	const swiperDotIndex = ref(0)
	const swiperChange = (e) => {
		swiperDotIndex.value = e.detail.current
	}
	
	// 活动详情、活动商品Tab
	const activeTab = ref(0)

	const promotionLabel = computed(()=>{
		const groupNum = detailInfo.value?.activeGroupBuy?.groupNum||'';
		return groupNum?`${groupNum}人团`:'';
	})

	const redPacketDialog = ref(null)
	const showRedPacket = () => {
		redPacketDialog.value.showDialog(true)
	}

	const serviceDialog = ref(null)
	const showServiceDialog = (goods) => {
		console.log('showServiceDialog', goods, serviceDialog.value)
		serviceDialog.value && serviceDialog.value.showDialog(true, goods)
	}
	
	const instructionDialog = ref(null)
	const showInstructionDialog = (activeGoodsId) => {
		instructionDialog.value.showDialog(true, activeGoodsId, 'activeGoodsId')
	}
	const backTest = () =>{
		const pages = getCurrentPages().reverse()
		let backI = 2
		pages.forEach((item,i) =>{//跳过编辑界面
			if(item.route.includes('create-activity')){
				backI = i+1
			}
		})
		setTimeout(() => {
			uni.navigateBack({
				delta:backI
			})
			// uni.redirectTo({
			// 	url: `/pagesB/my-activity/my-activity?from=${from.value}`
			// })
		}, 1500)
	}
	const submit = () => {
		reformatDatetime()
		activityInfo.value.startTime = reformatDatetime(activityInfo.value.startTime)
		activityInfo.value.endTime = reformatDatetime(activityInfo.value.endTime)
		activityInfo.value.validStartTime = reformatDatetime(activityInfo.value.validStartTime)
		activityInfo.value.validEndTime = reformatDatetime(activityInfo.value.validEndTime)
		uni.showLoading()
		// 已发布活动(未开始、进行中)走更新接口
		const apiMethod = [2,3].includes(activityInfo.value.activeState) ? businessActiveUpdateApi : releaseApi
		activityInfo.value.activeState = 2
		apiMethod(unref(activityInfo.value)).then(res => {
			uni.hideLoading()
			if (res) {
				uni.showToast({
					icon: 'none',
					title: '发布成功'
				})
				backTest()
				// setTimeout(() => {
				// 	uni.navigateBack({
				// 		delta:backI
				// 	})
				// 	// uni.redirectTo({
				// 	// 	url: `/pagesB/my-activity/my-activity?from=${from.value}`
				// 	// })
				// }, 1500)
			}
		}).catch(() => uni.hideLoading())
	}

	const id = ref('')
	const detailInfo = ref(undefined)

	const getDetail = () => {
		myActiveDetailApi(id.value).then(res => {
			detailInfo.value = res
			updateActivityInfo(res)
		})
	}

	onLoad(options => {
		console.log('活动详情预览', options)
		from.value = options.from
		id.value = options.id
		getDetail()
	})
</script>

<style lang="scss" scoped>
	:root {
		.uni-noticebar {
			margin-bottom: 0;
		}
	}

	.page {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.container {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.swiper-box {
		height: 320px;
		background-color: #000;
	}

	.swiper-item {
		height: 320px;
		position: relative;

		.notice-bar {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 36px;
		}
	}

	.swiper-stamp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.60);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-stamp-img {
		width: 160px;
		height: 160px;
	}

	.publish-time {
		color: rgba(51, 51, 51, 0.60);
		font-size: 12px;
		font-weight: 400;
		line-height: normal;
	}

	.viewer-info {
		margin-top: 4px;
		color: rgba(51, 51, 51, 0.60);
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.tabs {
		margin-top: 16px;
		display: flex;
		background-color: #FFF;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;

		.tab-item {
			position: relative;
			height: 52px;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(51, 51, 51, 0.60);
			font-size: 16px;
			font-weight: 500;
			line-height: 22px;

			&.active {
				color: #FA4543;
				font-size: 16px;
				font-style: normal;
				font-weight: 600;
				line-height: 22px;
			}
		}
	}

	.tab-content {
		background-color: #FFF;
		padding: 18px 12px 10px;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	.goods-item {
		display: flex;
		padding: 8px 12px;
		justify-content: space-between;
		align-items: center;
		border-radius: 8px;
		background: #F5F5F5;

		.title {
			color: #333;
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 8px;
		}

		&:not(:last-child) {
			margin-bottom: 8px;
		}
	}
</style>